<template>
  <uni-card spacing="0" padding="0">
    <view class="row">
      <uni-row>
        <uni-col :span="2">
          <image class="icon" :src="bell"/>
        </uni-col>
        <uni-col :span="20">
          <text class="leftCol">持续告警</text>
        </uni-col>
        <uni-col :span="2">
          <uni-badge :text="alarms.length"/>
        </uni-col>
      </uni-row>
    </view>
    <u-line></u-line>
    <!--    @scrolltolower="scrolltolower" show-scrollbar="true"
        scroll-y="true" scroll-x="true" scroll-top="0"-->
    <!--     :title="(index+1)+`.&nbsp;`+item.provincename+`&nbsp;&nbsp;`+item.cityname+`&nbsp;&nbsp;`+item.warnName"
                      :title-style="titleStyle"-->
    <view>
      <scroll-view class="list" @scrolltolower="scrolltolower" enhanced :show-scrollbar="true"
                   :scroll-y="true" :scroll-x="true" :scroll-top="0">
        <u-cell-group custom-style="height: 400rpx">
          <u-cell v-for="(item, index) in alarms" :key="index">
            <template #title>
              <text class="cell-title">
                {{ (index + 1) }}.
              </text>
              <text style="margin-left: -1rpx;font-size: 28rpx">
                {{ item.provincename }}
              </text>
              <text style="margin-left: 9rpx;font-size: 28rpx">
                {{ item.cityname }}
              </text>
              <text style="margin-left: 9rpx;font-size: 28rpx">
                {{item.warnName }}
              </text>
            </template>
          </u-cell>
        </u-cell-group>
      </scroll-view>

    </view>

  </uni-card>
</template>
<script setup>
import {ref, reactive} from 'vue';
import bell from '@/static/images/index/bell.png'
import {getAlarm} from '../../../api/report';
import UniTitle from "../../../uni_modules/uni-title/components/uni-title/uni-title";


const indexList = reactive([]);
const urls = [
  'https://cdn.uviewui.com/uview/album/1.jpg',
  'https://cdn.uviewui.com/uview/album/2.jpg',
  'https://cdn.uviewui.com/uview/album/3.jpg',
  'https://cdn.uviewui.com/uview/album/4.jpg',
  'https://cdn.uviewui.com/uview/album/5.jpg',
  'https://cdn.uviewui.com/uview/album/6.jpg',
  'https://cdn.uviewui.com/uview/album/7.jpg',
  'https://cdn.uviewui.com/uview/album/8.jpg',
  'https://cdn.uviewui.com/uview/album/9.jpg',
  'https://cdn.uviewui.com/uview/album/10.jpg',
];
const onLoad = () => {
  loadmore();
  alarmList();
};

const form = reactive({pageSize: 5, pageNum: 1})

const total = ref(0)

const alarms = reactive([]);

const alarmList = () => {
  getAlarm(form).then(res => {

    getAlarm({pageSize: res.total, pageNum: 1}).then(res => {

      const totalAlarmList = res.rows;
      for (let i = 0; i < totalAlarmList.length; i++) {
        if (totalAlarmList[i].warnStatus === 1) {
          alarms.push(totalAlarmList[i]);
        }
      }
    })
  })
}

const status = 0;
const scrolltolower = () => {
  loadmore();
};
const loadmore = () => {
  for (let i = 0; i < 30; i++) {
    indexList.push({
      url: urls[uni.$u.random(0, urls.length - 1)],
    });
  }
};
const titleStyle = {
  fontSize: '28rpx',
  marginLeft: '0rpx'
}

onLoad()
</script>
<style lang="scss">
.row {
  color: black;
  padding: 20rpx 20rpx 12rpx 20rpx;

  .icon {
    width: 40rpx;
    height: 40rpx;
    margin-top: 2rpx;
  }

  .leftCol {
    font-size: 32rpx;
    margin-left: -10rpx;
  }

  .rightCol {
    font-size: 28rpx;
  }
}

.u-cell__title-text.data-v-b4243719 {
  font-size: 12px;
  line-height: 22px;
  color: #303133;
}

.cell-title {
  font-size: 28rpx;
  margin-left: -10rpx;
}

.list {
  height: 400rpx;
}

</style>
